﻿


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>摄像头工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiAdmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiAdmin/style/admin.css" media="all">
    <style>
        ::-webkit-scrollbar {
            width: 12px !important;
            border-radius: 0px;
        }
    </style>
</head>
<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">本地摄像头 <span style="color:green;margin-left:30px"> 先配置本网站权限 摄像头-允许</span></div>
                    <div class="layui-card-body" pad15>

                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div class="layui-form layui-row layui-col-space16">
                                    摄像头列表：
                                    <div class="layui-inline">
                                        <select lay-verify="required" id="camera-list">
                                            <option value="">请选择摄像头</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline">
                                        <div class="layui-input-group">
                                            <div class="layui-input-suffix layui-btn-group">
                                                <button class="layui-btn layui-btn-primary" lay-on="open" lay-submit type="button">打开摄像头</button>
                                                <button class="layui-btn layui-btn-primary" lay-on="close" lay-submit type="button">关闭摄像头</button>
                                                <button class="layui-btn layui-btn-primary" lay-on="take" lay-submit type="button">拍照</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space16" style="height: calc(100vh - 180px)">
                                    <div class="layui-col-xs6">
                                        <!-- 填充内容 -->
                                        <div class="layui-card">
                                            <div class="layui-card-header">预览</div>
                                            <div class="layui-card-body">
                                                <div id="video" style="width: 700px; height: 520px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <div class="layui-card">
                                            <div class="layui-card-header">拍照</div>
                                            <div class="layui-card-body">
                                                <img src="" id="preview-img" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../layuiAdmin/modules/camera.js"></script>
    <script src="../../layuiAdmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../layuiAdmin/', //静态资源所在路径
            version: top.layui.setter.version
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'util'], function () {
            var $ = layui.$,
                form = layui.form,
                util = layui.util;
            const sleep = (t = 1000) => new Promise(resolve => setTimeout(resolve, t));

            camera.init().then(() => {
                camera.getDevices().then(res => {
                    res.forEach(r => {
                        $("#camera-list").append(new Option(r.label, r.deviceId));
                    })
                    form.render('select');
                })
            }).catch(err => {
                return layer.msg(err.message, { icon: 2, time: 2000 });
            })

            var active = {
                open: async function () {
                    if ($("#camera-list").val() == "") return;
                    await camera.OpenVideo($("#camera-list").find("option:selected").text(), document.querySelector('#video'), async function (e) {
                        console.log('摄像头开启成功');
                    }, function () {
                        console.log('摄像头开启失败');
                    });
                },
                close: async function () {
                    await camera.close();
                },
                take: async function () {
                    await sleep(1000);
                    var r = await camera.take();
                    //var img64 = r.base64;
                    $("#preview-img").attr("src", r.url)
                }
            }
            // 普通事件
            util.on('lay-on', active);
        });
    </script>
</body>
</html>
